<template>
  <div v-if="activeData.examConfig && isSupport">
    <el-divider>考试设置</el-divider>
    <el-form-item label="开启评分">
      <el-switch v-model="activeData.examConfig.enableScore" @change="handleEnableScoreChange" />
    </el-form-item>
    <div v-if="activeData.examConfig.enableScore">
      <el-form-item label="计分方式">
        <el-select v-model="activeData.examConfig.scoringType" placeholder="请选择计分方式">
          <el-option v-if="selectFields.includes(activeData.typeId)" label="唯一答案和分值" :value="1" />
          <el-option v-if="inputFields.includes(activeData.typeId)" label="回答中包含答案即可得分" :value="2" />
          <el-option v-if="inputFields.includes(activeData.typeId)" label="回答与答案完全相同才得分" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="分数">
        <el-input-number v-model="activeData.examConfig.score" :min="0" :step="0.1" />
      </el-form-item>
      <el-form-item v-if="selectFields.includes(activeData.typeId)" label="答案">
        <el-select v-model="activeData.examConfig.answer" multiple>
          <el-option
            v-for="option in activeData.config.options"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="inputFields.includes(activeData.typeId)" label="答案">
        <el-input v-model="activeData.examConfig.answer" placeholder="请输入正确答案" type="textarea" />
      </el-form-item>
    </div>
    <el-divider>选项设置</el-divider>
  </div>
</template>

<script>
import { debounce } from 'throttle-debounce'

export default {
  name: 'FormItemExamConfig',
  props: ['activeData', 'formConf'],
  data() {
    return {
      selectFields: ['RADIO', 'CHECKBOX', 'IMG_SELECT', 'SELECT'],
      inputFields: ['INPUT', 'TEXTAREA', 'NUMBER']
    }
  },
  computed: {
    isSupport() {
      return ['INPUT', 'TEXTAREA', 'RADIO', 'CHECKBOX', 'SELECT', 'IMG_SELECT', 'NUMBER'].includes(
        this.activeData.typeId
      )
    }
  },
  watch: {
    activeData: {
      handler(val) {
        if (!val.examConfig) {
          this.$set(this.activeData, 'examConfig', {
            scoringType: null,
            score: 0,
            enableScore: false,
            answer: null
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    dataChange: debounce(430, false, function (val) {
      this.$emit('data-change', val)
    }),
    changeRenderKey() {
      this.activeData.config.renderKey = +new Date()
    },
    handleEnableScoreChange(val) {}
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/styles/index';
</style>
